<template>
  <view class="h-title-text" :style="[componentStyle]">
    <template v-if="detail.componentContentList[0]">
      <view class="title-text-content" :class="{'inline': detail.templateType === 12}" :style="{'text-align': contentStyle.textAlign}">
        <view class="title" :style="{'color': contentStyle.titleColor,'font-size': `${contentStyle.titleFontSize * 2}rpx`,'font-weight': contentStyle.titleFontWeight }">
          <text class="_text">{{detail.componentContentList[0].title}}</text>
          <view v-if="contentStyle.more.show" :class="['_more',`span-${contentStyle.more.type}`]" @click="handleClickSpot(detail.componentContentList[0])">
            {{ contentStyle.more.content }}
            <x-icon v-if="contentStyle.more.type === 1" name="icon-017" size="20" color="#999999"/>
          </view>
        </view>
        <view v-if="detail.componentContentList[0].remark" class="desc" :style="{'color': contentStyle.descColor,'font-size': `${contentStyle.descFontSize}px`,'font-weight': contentStyle.descFontWeight }">{{detail.componentContentList[0].remark}}</view>
      </view>
    </template>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import navigateTo from '@/utils/x-navigate';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HTitleText',
  components: { XIcon },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {}
    };
  },
  computed: {
    contentStyle() {
      return this.detail.componentContentList[0] ? this.detail.componentContentList[0].contentStyle || {} : {};
    }
  },
  watch: {},
  created() {
    this.handleComponentStyle();
  },
  methods: {
    handleClickSpot(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
      this.$XTrack('onTitleText', {
        componentId: this.detail.id
      });
    },
    handleComponentStyle() {
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'padding', 'backgroundColor'])
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.title-text-content{
  padding: 10px 24px;
  word-break: break-all;
  .title{
    line-height: 1.375;
    display: flex;
    align-items: center;
    ._text{
      flex: 1;
    }
    ._more{
      margin-left: 12px;
      display: inline-flex;
      height: 52px;
      line-height: 52px;
      font-size: 28px;
      color: #999999;
      text-align: center;
      padding: 0 12px;
      font-weight: normal;
      &.span-1{
      }
      &.span-2{
      }
      &.span-3{
        border: 2px solid #CCCCCC;
        box-sizing: border-box;
        border-radius: 6px;
      }
    }
  }
  .desc{
    margin: 4px 0 0;
    line-height: 1.375;
  }
  &.inline{
    .title{
      display: inline-block;
    }
    .desc{
      display: inline-block;
      margin: 0 0 0 16px;
    }
  }
}
</style>
